<template>
  <el-container>
    <el-header class="titleBar">
      客服管理
    </el-header>

    <el-main class="mainContent">
      <el-card>
   
        <!-- 按钮操作列表 -->
      
        <!-- 表单数据 -->
        <el-table  :data="custmerelist" border style="width: 100%" 
       :header-cell-style="{textAlign: 'center',background:'#ededed',color:'#333',fontWeight:'500'}"
         :cell-style="{ textAlign: 'center' }">
         <el-table-column label="id" prop="id"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="邮箱" prop="email"></el-table-column>
            <el-table-column label="留言内容" prop="content"></el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                    <el-button type="text" size="small"   class="deleteBtn"  @click="deleteBtn(scope.row)" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="pagination.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          >
          </el-pagination>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
        // select死数据
      options: [
        {
          value: "选项1",
          label: "尾板",
        },
        {
          value: "选项2",
          label: "车厢",
        },
      ],
      value: "",
    //  
      custmereInfo:{
        total:5,
        list:''
      },
       pagination: {
        pagenum: 1,
        pagesize: 5,
        total: 7,
      },
      custmerelist:[]
    };
  },
  methods:{
      handleClick(row) {
        console.log(row);
      },
      // 
      async getCustmereList(){
          const res = await this.http.get('/customer/select',this.pagination);
          this.custmerelist = res.list;
          this.pagination.total = res.total;
          console.log(res);
      },
      //  监听pagesize-页码值改变
    handleSizeChange(newSize) {;
      this.pagination.pagesize = newSize;
      this.getCustmereList();
    },
    handleCurrentChange(newPage) {
      this.pagination.pagenum = newPage;
      this.getCustmereList();
    },
    // 删除
    async deleteBtn(row){
      console.log(row);
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
      .catch((error) => error);
      console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      const res = await this.http.post("/customer/delete", row.id);
      console.log(res);
       this.getCustmereList();
    }
  },
  created(){
      this.getCustmereList();
  }
};
</script>

<style scoped>
.header_title {
  font-size: 22px;
  margin-bottom: 0px;
  font-weight: 400;
  color: #999999;
}
.bgk {
  background: pink;
}
</style>
